<template>
  <div>
    <el-card class="login-form-layout">
      <el-form autoComplete="on" ref="loginForm" label-position="left">
        <div style="text-align: center">
          <svg
            class="icon"
            aria-hidden="true"
            style="width: 56px; height: 56px; color: #409eff"
          >
            <use xlink:href="#icon-dingdan"></use>
          </svg>
        </div>
        <h2 class="login-title color-main">欢迎登录</h2>
        <el-form-item prop="username">
          <el-input
            name="username"
            type="text"
            autoComplete="on"
            placeholder="请输入用户名"
            v-model="username"
          >
            <span slot="prefix">
              <svg-icon icon-class="user" class="color-main"></svg-icon>
            </span>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            name="password"
            autoComplete="on"
            placeholder="请输入密码"
            type="password"
            v-model="password"
          >
            <span slot="prefix">
              <svg-icon icon-class="password" class="color-main"></svg-icon>
            </span>
            <span slot="suffix">
              <svg-icon icon-class="eye" class="color-main"></svg-icon>
            </span>
          </el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 60px; text-align: center">
          <el-button style="width: 45%" type="primary" @click="login">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <img :src="login_center_bg" class="login-center-layout" />
  </div>
</template>

<script>
import login_center_bg from "@/assets/images/login_center_bg.png";
import { login } from "../../api/login";
import { setToken } from "../../utils/auth";
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      loading: false,
      pwdType: "password",
      dialogVisible: false,
      supportDialogVisible: false,
      login_center_bg,
    };
  },
  methods: {
    //登录
    login() {
      var username = this.username.trim();
      var password = this.password.trim();
      var res = {
        username: username,
        password: password,
      };
      console.log(res);
      login(res)
        .then(({ data }) => {
          console.log(data);
          if (data.code === 200) {
            if (data.data.user.userRole === "管理员") {
              setToken(data.data.token, data.data.refreshToken);
              this.$router.push({path:"/"});
            } else {
              this.$message("你不是管理员，不能登录"); 
            }
          } else {
            this.$message("密码错误");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.login-form-layout {
  position: absolute;
  left: 0;
  right: 0;
  width: 360px;
  margin: 140px auto;
  border-top: 10px solid #409eff;
}

.login-title {
  text-align: center;
}

.login-center-layout {
  background: #409eff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-top: 200px;
}
</style>
